<style scoped>
.window{display: flex;position: fixed;left: 0;top: 0;right: 0;bottom: 0;overflow: hidden;}
.frame-left{width: 200px;height: 100%;overflow: auto;flex-direction: column;background-color: #112d4e;transition: width 0.3s;}
.frame-left.collapse{width: 64px;}

.frame-left .tenant_info{padding: 40px 0;text-align: center;flex-direction: column;}
.frame-left .tenant_info img{width: 98px;height: 98px;}
.frame-left .tenant_info p{color: #fff;font-size: 16px;font-weight: bold;margin-top: 10px;}
.frame-left.collapse .tenant_info img{width: 46px;height: 46px;}
.frame-left.collapse .tenant_info p{display: none;}

.frame-left .menu{width: 100%;overflow-y: scroll;}
.frame-left .menu .el-menu{border: none;}
.frame-left .menu .el-menu .el-badge{line-height: 1.5;padding-right: 10px;}
.frame-left .menu::-webkit-scrollbar{display: none;}
.frame-left .menu img{width: 20px;height: 20px;object-fit: contain;margin-right: 10px;}
.frame-left .menu .el-menu-item{height: 46px;display: flex;align-items: center;line-height: 46px;}
.frame-left .menu .el-sub-menu .el-menu-item{background: #001833 !important;}
.frame-left .menu .el-menu-item.is-active{background: #466b94 !important;}
.frame-left .menu .el-menu-item:hover{background: #466b94 !important;}

.frame-right{height: 100%;flex-direction: column;overflow: hidden;}

.frame-top{width: 100%;height: 48px;background-color: #fff;border-bottom: 2px solid #dbdbdb;}
.frame-top .ico-box{width: 46px;height: 46px;display: flex;align-items: center;justify-content: center;}
.frame-top .ico-box>img{width: 16px;height: 16px;}
.frame-top .el-tag.on {background-color: #112d4e !important;}
.frame-top .el-tag {padding: 0 10px;line-height: 30px;height: 32px;margin-right: 10px !important;cursor: pointer;}
.frame-top .admin{height: 32px;padding: 0 10px;}
.frame-top .admin img{width: 32px;height: 32px;border-radius: 50%;margin-right: 10px;}
.frame-top .full{border-left: 1px solid #eee;}

.frame-body{width: 100%;overflow: hidden auto;}
</style>
<template>
  <div class="window flex">
    <div v-show="!full_body" class="frame-left flex" :class="{collapse:collapse}">
      <div class="tenant_info flex">
        <img :src="logo" alt="">
        <p>{{ tenant.title }}</p>
      </div>
      <div class="menu max">
        <menu_slot @click:li="menu_click" :config="menu" :router="true" :collapse="collapse" :collapse-transition="false" :default-active="$route.fullPath" background-color="#112D4E" text-color="#D8D8D8" active-text-color="#fff">
          <template #default="{row}">
            <img v-if="row.head_img" class="menu-icom" :src="row.head_img" />
            <el-badge v-if="row.badge>0" :value="row.badge">{{ row.title }}</el-badge>
            <span v-else>{{ row.title }}</span>
          </template>
        </menu_slot>
      </div>

    </div>
    <div class="frame-right max flex" :class="{collapse:collapse}">
      <div v-show="!full_body" class="frame-top flex">
        <div class="ico-box">
          <img v-show="collapse" src="@/assets/img/to.png" @click="collapse=!collapse" />
          <img v-show="!collapse" src="@/assets/img/go.png" @click="collapse=!collapse" />
        </div>
        <div class="tag-box max" style="overflow: hidden;position: relative;height: 100%;">
          <div class="flex" style="min-width: 100%;position: absolute;top: 0;right: 0;height: 100%;">
            <el-tag :class="{on: $route.fullPath == row.path}" v-for="(row,i) in page_list" :closable="!!i" type="info" @close="close_page(row, i)" @click="click_page(row)">
              {{ row.title }}
            </el-tag>
          </div>
        </div>
        <div class="expiration_time flex" v-if="tenant.id>0">
          <div v-if="tenant_expiration_day==0" class="info" style="padding: 0 05px;">
            <p>
              <span style="background-color: var(--el-color-primary);color: #fff;display: inline-block;margin: 02px;padding:0 02px;">{{tenant.package_title}}</span>
              <span v-if="tenant.expiration_time">到期时间：</span>
            </p>
            <p v-if="tenant.expiration_time">{{tenant.expiration_time}}</p>
          </div>
          <div v-else class="info" style="padding: 0 05px;color: var(--el-color-danger);">
            <p>
              <span style="background-color: var(--el-color-primary);color: #fff;display: inline-block;margin: 02px;padding:0 02px;">{{tenant.package_title}}</span>
              <b>已过期{{tenant_expiration_day}}天</b>
            </p>
            <p>逾期截止时间：{{tenant.max_expiration_time.substring(0, 10)}}</p>
          </div>
          <el-button v-if="tenant.expiration_time" @click="iframe('/expire')" size="small">续期</el-button>
        </div>
        <div class="admin">
          <el-dropdown>
            <div class="flex" style="cursor: pointer;outline: none;">
              <img :src="admin.head_img" alt="" /><p>{{ admin.nickname }}</p>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="iframe('/index/edit_self')">编辑账号信息</el-dropdown-item>
                <el-dropdown-item @click="iframe('/index/edit_password')">修改密码</el-dropdown-item>
                <el-dropdown-item @click="clear_cache">清理缓存</el-dropdown-item>
                <el-dropdown-item @click="iframe('/db_data/export')">导出数据</el-dropdown-item>
                <el-dropdown-item @click="iframe('/db_data/import')">导入数据</el-dropdown-item>
                <el-dropdown-item @click="loginout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="ico-box full" @click="full=!full">
          <img v-show="full" src="@/assets/img/out_full_screen.png" alt="" />
          <img v-show="!full" src="@/assets/img/full_screen.png" alt="" />
        </div>
      </div>
      <div class="frame-body max">
        <router-view :key="$route.fullPath"></router-view>
      </div>
      <div class="frame-footer">
        <iframe_list ref="iframe_list"></iframe_list>
        <show_file ref="show_file"></show_file>
      </div>
    </div>
  </div>
</template>
<script>
import s94Mjs from "s94-js";
import {_config} from "@/js/s94_tool.js";
import {confirm, href_handle, iframe} from "@/js/tool.js";
import {ajax} from "@/js/api_tool.js";
import menu_slot from "@/components/menu_slot.vue";
import iframe_list from "@/components/global/iframe_list.vue";
import show_file from "@/components/global/show_file.vue";
import {use_menu_list} from "@/store/menu_list.js";
import {use_config_map} from "@/store/config_map.js";
import {use_this_admin} from "@/store/this_admin.js";

export default {
  components: {menu_slot, iframe_list, show_file},
  data(){
    let admin = _config('this_admin', {});
    // 租户信息
    let tenant_expiration_day = 0; //租户过期天数
    let tenant = _config('this_tenant', {});
    if (tenant.expiration_status != 1){
      let dt = (new Date()).getTime() - (new Date(tenant.expiration_time)).getTime();
      tenant_expiration_day = Math.ceil(dt/(3600*24*1000));
    }
    tenant.title =  tenant.title || _config('config.page.base.seo_title');
    tenant.max_expiration_time = tenant.max_expiration_time || '';

    return {
      admin: admin,
      logo:  _config('config.page.base.logo', tenant.head_img),
      tenant: tenant,
      tenant_expiration_day: tenant_expiration_day,
      collapse: false,
      full: false,
      page_list: [
        {title:'首页', path:'/index/home'},
      ],
      max_page_list: 10,
      iframe_list: [],
      show_file_src: '',
    }
  },
  methods:{
    iframe: iframe,
    path_title(path){
      var title = '';
      s94Mjs.eachloop(this.menu, 'children', function (row) {
        if (row.path == path){
          title = row.title;
          return false;
        }
        return true;
      })
      return title;
    },
    menu_click(row){
      setTimeout(()=>{
        this.add_page(row);
      },200)
    },
    add_page(row){
      if (typeof(row) == 'string') row = {title: this.path_title(row), path: row};
      if (!row.title) return;
      let in_list = false;
      this.page_list.forEach((row)=>{
        if (in_list) return;
        in_list = (this.$route.fullPath == row.path);
      })
      if (in_list) return;
      this.page_list.push(row);
      if (this.page_list.length > this.max_page_list) this.page_list.splice(1,1);
    },
    click_page(row){
      if (this.$route.fullPath == row.path) return;
      href_handle(row.path);
    },
    close_page(row, i){
      this.page_list.splice(i, 1);
      if (this.$route.fullPath == row.path){
        href_handle('/index/home');
      }
    },
    refresh_menu(){
      ajax('/admin/index/menu', (res)=>{
        s94Mjs.eachloop(res.data, 'children', function (row){
          row.value = row.path || row.id;
          row.content = row.title;
          return true;
        })
        this.menu = res.data;
        return false;
      })
    },
    clear_cache(){
      ajax({url:'/home/api/clean_cache', showMessage:ajax.SHOW_MESSAGE_ALL, loading:true});
    },
    loginout(){
      confirm.warning('是否确定退出').then(()=>{
        ajax('/admin/index/loginout', ()=>{
          use_this_admin().$reset();
          setTimeout(function (){ href_handle("/login"); },500)
        })
      })
    },
  },
  computed: {
    // 是否全屏显示body部分
    full_body(){
      return this.$route.path === '/login';
    },
    menu(){
      return use_menu_list().list || [];
    },
  },
  watch:{
    full(v, oldV){
      if(v){
        let element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();// IE11
        }
      }else{
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
    },
  },
  mounted() {
    let app = this;
    // 添加当前页面到page列表
    setTimeout(()=>{ this.add_page(this.$route.fullPath); },20);

    window.test = function (){
      console.log(app.$refs.body);
    }
  }
}
</script>
